<template>
  <!--  卡片-->
  <div>
    <div slot="header" class="clearfix" style="height: 50px;background-color: #2c3e50;border-radius: 5px 5px 0px 0px">
      <span style="color: white;font-size: 25px;margin-left: 20px;line-height: 50px">咨询管理</span>
      <el-button style="float: right; padding: 3px 0;text-decoration: none;margin-right: 20px;color: white;line-height: 50px;font-size: 15px" type="text" @click="dialogFormVisible = true"><i class="el-icon-plus"></i>添加</el-button>
      <el-button style="float: right; padding: 3px 0;text-decoration: none;margin-right: 20px;color: white;line-height: 50px;font-size: 15px" type="text" @click="Refresh"><i class="el-icon-refresh-right"></i>刷新</el-button>
    </div>
    <div>
      <!--       将获取到的数据进行计算 表格-->
      <el-table :data="lists.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%;" border     :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"  :default-sort = "{prop: 'date', order: 'descending'}">
        <el-table-column prop="id" label="序号" width="105"></el-table-column>
        <el-table-column prop="name" label="客户姓名"></el-table-column>
        <el-table-column prop="content" label="咨询内容"></el-table-column>
        <el-table-column prop="examination" label="咨询时间"></el-table-column>
        <el-table-column prop="doctor" label="接待医生"></el-table-column>
        <el-table-column fixed="right" label="基本操作" width="150">
          <template slot-scope="scope">
            <!--            点击删除后获取到数组里的id-->
            <el-button type="text" size="small" style="border-right: 1px solid lavender;padding-right: 20px;border-radius: 0;" @click="deleteByID(scope.row.id)">删除</el-button>
            <!--            点击修改后获取到数组里的数据-->
            <el-button type="text" size="small" style="margin-left:20px;border-radius: 0"  @click="changeRow(scope.row.id,scope.row.name,scope.row.content,scope.row.examination,scope.row.doctor)">修改</el-button>
          </template>

        </el-table-column>
      </el-table>
      <!--        分页-->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-sizes="pageSizes"
                     :page-size="PageSize" layout=" sizes,total,prev, pager, next, jumper"
                     :total="totalCount"
                     style="text-align: center">
      </el-pagination>
    </div>
    <!--    添加，对话框-->
    <el-dialog title="添加咨询" :visible.sync="dialogFormVisible" style="margin: 0 auto " center>
      <el-form :model="add">
        <el-form-item label="客户姓名：" :label-width="formLabelWidth">
          <el-input v-model="add.name" autocomplete="off" clearable placeholder="请输入客户姓名"></el-input>
        </el-form-item>
        <el-form-item label="咨询内容：" :label-width="formLabelWidth">
          <el-input v-model="add.content" autocomplete="off" clearable placeholder="请输入咨询内容"></el-input>
        </el-form-item>
        <el-form-item label="咨询时间：" :label-width="formLabelWidth">
          <el-input v-model="add.examination" autocomplete="off" clearable placeholder="请输入咨询时间"></el-input>
        </el-form-item>
        <el-form-item label="接待医生：" :label-width="formLabelWidth">
          <el-input v-model="add.doctor" autocomplete="off" clearable placeholder="请输入接待医生"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="Insert()" style="margin-right: 50px">添加</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </div>
    </el-dialog>
    <!--    修改，抽屉-->
    <el-drawer
        title="咨询修改"
        :visible.sync="drawer"
        :direction="direction"
        style="text-align: center"
    >
      <el-form ref="form" label-width="100px" style="width: 450px;margin: 0 auto">
        <el-form-item label="客户姓名：">
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item label="咨询内容：">
          <el-input v-model="content"></el-input>
        </el-form-item>
        <el-form-item label="咨询时间：">
          <el-input v-model="examination"></el-input>
        </el-form-item>
        <el-form-item label="接待医生：">
          <el-input v-model="doctor"></el-input>
        </el-form-item>
        <el-form-item>
          <template>
            <el-button type="primary" @click="UpdateByid(curId,name,content,examination,doctor)">立即修改</el-button>
            <el-button style="margin-left: 50px"  @click="drawer = false">取消</el-button>
          </template>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name:'',
  data(){
    return {
      // 后端数组
      lists:{},
      // 分页
      // 默认显示第几页
      currentPage:1,
      // 总条数
      totalCount:1,
      // 个数选择器
      pageSizes:[1,2,3,4,5,6,7,8],
      // 默认每页显示的条数
      PageSize:4,
      // 添加
      add:{},
      // 是否让弹出层进行显示
      dialogFormVisible: false,
      // 设置form表单的宽度
      formLabelWidth: '120px',
      // 是否让抽屉进行显示
      drawer:false,
      // 抽屉中类似float的布局样式
      direction: 'rtl',
      // change: {},
      curId:'',
      name:'',
      examination:'',
      content:'',
      doctor:''
    }
  },
  methods:{
    // 获取数组的字段
    changeRow(id,name,content,examination,doctor){
      // 让抽屉显示
      this.drawer = true
      // 字段
      this.curId = id
      this.name = name
      this.content = content
      this.examination = examination
      this.doctor = doctor
    },
    // 删除
    deleteByID(id) {
      // 运用axios的delete方式通过url传参
      if(confirm("确定删除吗")){
        this.$axios.delete("/api/consult/delete/" + id).then((res) => {
          console.log(res);
          if (res.data.status === 1) {
            this.$message.success("删除成功")
            this.list()
          } else {
            this.$message.error("删除失败")
          }
        })
      }
    },
    // 后端查询方法
    list(){
      // 运用axios的get方式通过url获取后端数组
      this.$axios.get("/api/consult/list").then((res) =>{
        console.log(res);
        // 数组等于res里的数据
        this.lists = res.data.data;
        // 分页总条数的长度等于数组的数据总长度
        this.totalCount=this.lists.length;
      })
    },
    //后端添加方法
    Insert() {
      // 运用axios的post方式通过url发送前端数组数据给后端插入数据
      this.$axios.post('/api/consult/Insert', this.add).then((res) => {
        console.log(res);
        if (res.data.status === 1) {
          this.$message.success('添加成功');
          this.list();
          this.dialogFormVisible=false;
        } else {
          this.$message.error('添加失败');
        }
      })
    },
    // 修改
    UpdateByid(id,name,content,examination,doctor) {
      if(confirm("确定要修改吗")){
        // 运用axios的patch方式通过url发送前端changRow方法获取到的页面数据插入到后端进行修改
        this.$axios.patch("/api/consult/Update?id=" + id+"&name="+name+"&content="+content+"&examination="+examination+"&doctor="+doctor).then((res) => {
          console.log(res);
          if (res.data.status === 1) {
            this.$message.success("修改成功")
            this.drawer=false
            this.list()
          } else {
            this.$message.error("修改失败")
          }
        })
      }
    },
    Refresh(){
      this.list()
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize=val
      // 在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
    },

  },
  // 获取数组
  created:function(){
    this.list();
  }
}
</script>


<style>
/*卡片顶部样式*/
.el-card__body{
  padding: 0;
}
/deep/.el-table th > .cell {

  text-align: center;

}

/deep/.el-table .cell {

  text-align: center;

}
.el-form-item__label{
  padding: 0;
}
</style>
